import React,{ useState,useEffect } from 'react';
import { Button,  } from 'antd';
import { history } from 'umi';
import {ArrowDownOutlined,} from '@ant-design/icons';
import AdvancedSearchFrom from '@/components/SearchForm/advancedSearchFrom';
import CustomTable from '@/components/Table';
import page from '../../page.less';
import {getDict} from '@/service/common/dict'
import {accountsReceivable} from '@/service/fiance/index'
import {downloadDocumentUrl} from '@/service/common/download'


const formItemLayout = {
  labelCol: { flex: '100px' },
  wrapperCol: { flex: '1' },
};
function AccountsReturnable() {
  const [params, setParams] = useState({
    current: 1,
    size: 10,
  });
  // const [selectId, setSelectId] = useState<any[]>([]);
  const [currentPage,setCurrentPage] = useState({current:1})
  // 分页数据
  const [total,setTotal]  = useState([]);
  const [formItem,setFormItem] = useState()
  const [dataList,setDataList] = useState([])
  const [dict, setDict] = useState({
		order_finance_pay_status: [],
		order_rent_type: [],
		order_payment_method: [],
		order_finance_collection_type: [],
    order_finance_refund_status:[],
	}) // 字典值
  const getlist =(value:any,pages:any)=>{
    accountsReceivable({...pages,...value}).then((res:any)=>{
        setDataList(res?.data?.records)
        setTotal(res?.data?.total)
    })
  }
   // 获取字典
   useEffect(() => {
    getlist(params,{})
		getDict(
			{
				dictKeys: [
					'order_rent_type', // 订单列类型
					'order_payment_method', // 付款方式
					'order_finance_collection_type', // 收款类型
          'order_finance_refund_status', // 退款类型
				],
			},
			(res: any) => {
				setDict(res)
			},
		)
	}, [])
  // 根据状态判断退款按钮显示隐藏
  const butList = (record:any)=>{
    if(record.refundStatus==='2'){
      return <>
        <Button
          size="small"
          type="link"
          onClick={() => history.push(`/finance/accountsReturnable/details?id=${record.id}`)}
        >
          查看
        </Button>
      </>
    }
      return <>
         <Button
            size="small"
            type="link"
            onClick={() => history.push(`/finance/accountsReturnable/details?id=${record.id}`)}
          >
            查看
          </Button>
          <Button
            type="link"
            size="small"
            onClick={() => history.push( `/finance/accountsReturnable/info?id=${record.id}`)}
          >
            退款
          </Button>
      </>
    
  }
  const formItems: any[] = [
    {
      type: 'group',
      key: 'group1',
      groupItems: [
        {
          type: 'input',
          label: '订单编号',
          name: 'orderCarNo',
          key: 'orderCarNo',
          placeholder: '请输入订单编号',
        },
        {
          type: 'input',
          key: 'driverName',
          name: 'driverName',
          label: '司机名称',
          placeholder: '请输入司机名称',
        },
        {
          type: 'select',
          key: 'refundStatus',
          name: 'refundStatus',
          label: '退款状态',
          placeholder: '请选择退款状态',
          keys: 'dictKey',
          title: 'dictValue',
          items: dict?.order_finance_refund_status,
        },
        {
          type: 'select',
          key: 'rentType',
          name: 'rentType',
          label: '订单类型',
          keys: 'dictKey',
          title: 'dictValue',
          items: dict?.order_rent_type,
        },
      ],
    },
    {
      type: 'group',
      key: 'group5',
      groupItems: [
        {
          type: 'input',
          label: '应退单编号',
          name: 'refundNo',
          key: 'refundNo',
          placeholder: '请输入应退单编号',
        },
        {
          type: 'select',
          key: 'refundType',
          name: 'refundType',
          label: '退款类型',
          keys: 'dictKey',
          title: 'dictValue',
          items: dict?.order_finance_collection_type,
        },
        {key: '1',},
        {key: '2',},
      ],
    },
  ];
  const columns = [
    {
      title: '应退单编号',
      dataIndex: 'refundNo',
      align: 'center',
      key:'refundNo',
      width:200,
    },
    {
      title: '订单编号',
      dataIndex: 'orderCarNo',
      align: 'center',
      key:'orderCarNo',
      width:300,
    },
    {
      title: '司机名称',
      dataIndex: 'driverName',
      align: 'center',
      key:'driverName',
      width:100,
    },
    {
      title: '退款状态',
      dataIndex: 'refundStatusname',
      align: 'center',
      key:'refundStatusname',
      width:100,
    },
    {
      title: '退款类型',
      dataIndex: 'refundTypename',
      align: 'center',
      key:'refundTypename',
      width:100,
    },
    {
      title: '应退金额',
      dataIndex: 'refundAmount',
      align: 'center',
      key:'refundAmount',
      width:100,
      render:(text:any)=>(
        <>
          {text===0?'0':text}
        </> 
      )
    },
    {
      title: '车牌号',
      dataIndex: 'plateNo',
      align: 'center',
      key:'plateNo',
      width:100,
    },
    {
      title: '订单类型',
      dataIndex: 'rentTypename',
      align: 'center',
      key:'rentTypename',
      width:100,
    },
    {
      title: '所属公司',
      dataIndex: 'companyName',
      align: 'center',
      key:'companyName',
      width:100,
    },
    {
      title: '操作',
      dataIndex: '',
      fixed: 'right',
      align: 'center',
      width:160,
      render: (_text:any,record:any) => (
        butList(record)
      ),
    },
  ];
  // 搜索
  const finish = (value:any)=>{
      const data ={
        current: 1,
        size: 10,
      }
      getlist(data,value)
      setFormItem(value)
      setCurrentPage({current:1})
  }
  // 清空
  const reset = ()=>{
    const data ={
      current: 1,
      size: 10,
    }
    setCurrentPage({current:1})
    getlist(data,{})
  }
  return (
    <>
      <div className={`${page.card} ${page.page} searchFrom`}>
        <AdvancedSearchFrom
          formLayout={formItemLayout}
          onFinish={finish}
          onReset={reset}
          formItems={formItems}
          rows={3}
        />
        <div className={page.list}>
          <Button
              icon={<ArrowDownOutlined />}
              style={{color: '#9A59FF',borderColor: '#9A59FF'}}
              ghost
              size="small"
              onClick={() => {
                downloadDocumentUrl(
                  {
                    resourceId:
                      '154',
                    queryDesc:
                      '应退账单列表导出,resourceId:151',
                    queryParam:formItem,
                  },
                )
              }}
            >
              导出
          </Button>
          <CustomTable
             pagination
             total={total}
             params={currentPage}
             callback={(pagination: any) => {
               setParams(pagination);
               getlist(pagination,{});
               const data  = {
                 current:pagination?.current
               }
               setCurrentPage(data)
             }}
            selectCallback={() => {
              // setSelectId([...keys]);
            }}
            getCheckboxProps
             columns={columns}
             dataSource={dataList}
          />
        </div>
      </div>
    </>
  );
}
export default AccountsReturnable;
